<template>
    <div>
      <p>name: <input v-model="people.name"> {{people.name}}</p>
      <p>age:{{people.age}}</p>
  </div>
</template>

<script>

import {reactive} from "vue"



export default {
    setup() {
        // reactive不需要使用.value来获取值
        // 不要使用reactive封装基础数据类型，响应会延缓，会报警告错误
        // reactive是ref的二次封装
        // reactive相当于包装了一个代理对象，用来修改原始对象的值。不要尝试修改原始对象，会造成奇怪错误。
        let obj = {name: "Hydra",age:35}
        let people = reactive(obj); 

        setInterval(()=> {
            people.age ++;
            console.log("obj.age = ",obj.age);
        },1000)

        return {people}

    }

}
</script>

<style>

</style>